<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
     <input v-model="msg" type="text">
     <input v-model="conut"><br/>
     <input v-model="user.a">
     <button @click="add()">添加</button>
</div>
</body>
<!--
    计算属性：
            1：vue初始化的时候会被加载。
            2：相关属性发生变化时候会被加载----相关属性影响计算属性
            3：计算属性发生变化时候会被加载-----影响相关属性。
    监听---只能监听状态属性：
         浅监听：只能监听普通类型的状态属性。
         深监听：对一些对象类型和数组类型的状态属性进行监听。
-->

<script src="./js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            msg:"ceshi",
            user:{
                a:123
            }
        },
        methods:{
            add:function () {
                this.user.a="12";
            }
        },
        watch:{ //只有当状态属性发生变化的时候才会触发
            /*msg:function (value) {
                alert(value)
                this.msg=value.toUpperCase();
            },*/
            /*user:function (value) {

                alert(value)
            }*/

           /* "user.a":function (value) {
                alert(1)
            },*/
            user:{
                handler:function () {
                    alert(1)
                },
                deep:true,
                immediate:true //初始化加载被监听
            }
        },
        computed:{
            /*conut:function () {
                alert(1)
                return this.msg;
            }*/
            conut:{
                get:function (value) {
                    return this.msg;
                },
                set:function (value,oldvalue) {
                   this.msg="ddddddd"
                }

            }
        }
    })
</script>

</html>